<script>
import * as echarts from 'echarts';

// ak   qCVAwFCKCRAZyizqnaZC1ViG2DKrhzi2
import 'echarts/extension/bmap/bmap';

import { loadBMap, arr } from './key.js'

var ROOT_PATH = 'https://echarts.apache.org/examples';

import axios from 'axios';

export default {
  data() {
    return {
      mapData: arr

    }
  },
  mounted () {
    loadBMap("AOrbUorLGCq6SusvlXDYBmcZswvEZ8Ds").then(() => {

      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      const lines = this.mapData.map(function (track) {
        return {
          coords: track.map(function (seg, idx) {
            return seg.coord;
          })
        }
      })


      myChart.setOption(
        (option = {
          bmap: {
            center: [120.13066322374, 30.240018034923],
            zoom: 14,
            roam: true,
            mapStyle: {
              styleJson: [
                {
                  featureType: 'water',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'land',
                  elementType: 'all',
                  stylers: {
                    color: '#f3f3f3'
                  }
                },
                {
                  featureType: 'railway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'all',
                  stylers: {
                    color: '#fdfdfd'
                  }
                },
                {
                  featureType: 'highway',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry',
                  stylers: {
                    color: '#fefefe'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'geometry.fill',
                  stylers: {
                    color: '#fefefe'
                  }
                },
                {
                  featureType: 'poi',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'green',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'subway',
                  elementType: 'all',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'manmade',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'local',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'arterial',
                  elementType: 'labels',
                  stylers: {
                    visibility: 'off'
                  }
                },
                {
                  featureType: 'boundary',
                  elementType: 'all',
                  stylers: {
                    color: '#fefefe'
                  }
                },
                {
                  featureType: 'building',
                  elementType: 'all',
                  stylers: {
                    color: '#d1d1d1'
                  }
                },
                {
                  featureType: 'label',
                  elementType: 'labels.text.fill',
                  stylers: {
                    color: '#999999'
                  }
                }
              ]
            }
          },
          series: [
            {
              type: 'lines',
              coordinateSystem: 'bmap',
              data: lines,
              polyline: true,
              lineStyle: {
                color: 'purple',
                opacity: 0.6,
                width: 1
              }
            }
          ]
        })
      )

      option && myChart.setOption(option);

    })


  }
}
</script>

<template>
  <div>
    <main id="main" style="height: 600px;">

    </main>
  </div>
</template>

<style lang="scss" scoped>
#main {
  position: relative;
}
</style>